<template>
  <Render :context="currentContext"></Render>
</template>

<script setup lang="ts">
import { useContextStore } from '../store/context';
import { storeToRefs } from 'pinia';
import Render from '../components/Render.vue';
import { useRouter } from 'vue-router';

const contextStore = useContextStore();
const { currentContext } = storeToRefs(contextStore);
contextStore.clearCurrentContext();

const router = useRouter();
contextStore.setCurrentContext(
  [
    {
      type: 'lines',
      lines: [
        {
          text: 'This is a List Page, a collection of articles. You can view the article by select the title.',
          color: 'red',
        },
      ],
    },
    {
      type: 'options',
      options: [
        {
          text: 'Article 1',
          action: () => {
            router.push({ name: 'Article', params: { id: '1'} });
          },
          actionType: 'navigation'
        },
        {
          text: 'Article 2',
          action: () => {
            router.push({ name: 'Article', params: { id: '2'} });
          },
          actionType: 'navigation'
        },
        {
          text: 'Article 3',
          action: () => {
            router.push({ name: 'Article', params: { id: '3'} });
          },
          actionType: 'navigation'
        },
        {
          text: 'Article 4',
          action: () => {
            router.push({ name: 'Article', params: { id: '4'} });
          },
          actionType: 'navigation'
        },
      ],
    }
  ]
);
</script>
